<template>
  <div class="conponent">
    <div class="login">
      <div class="title">
        <p>欢迎使用智慧养老系统</p>
      </div>
      <div class="input">
        <div class="act">
          <el-input v-model="act" style="width: 33vw" placeholder="手机号" />
        </div>
        <div class="pwd">
          <el-input v-model="pwd" style="width: 33vw" type="password" placeholder="密码" show-password />
        </div>
        <div class="subBtn">
          <el-button type="primary" @click="login">登录</el-button>
        </div>
        <div class="reg">
          <p>还没有账号？<router-link to="/register">立即注册</router-link></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus';
import { loginApi } from "@/API/interface/loginRegister";
import { useLoginStore } from "@/stores/login";

const router = useRouter();
const act = ref("");
const pwd = ref("");
const loginStore = useLoginStore();

//登录
const login = async () => {
  try {
    const response = await loginApi({
      username: act.value,
      password: pwd.value,
    });
    console.log("登录", response.data);
    if (response.data.code == "200") {
      ElMessage.success('登录成功');
      router.push("/dailyData");
      const loginInfo = response.data.data;
      loginStore.setLoginInfo(loginInfo);
      console.log("登录信息", loginInfo);
    } else {
      ElMessage.error('该账号或密码不存在或不正确！');
    }
  } catch (error) {
    ElMessage.error('登录失败，请重试');
  }
};
</script>

<style lang="less" scoped>
.conponent {
  display: flex;
  /* 使用flex布局 */
  width: 100vw;
  height: 100vh;
  /* 设置父容器的高度 */
  background-image: linear-gradient(to right, #d26edd, #92b6f5);

  .login {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 20%;
    right: 30%;
    width: 40vw;
    height: 40vh;
    background-color: #ffffff;
    border-radius: 1em;

    .title {
      p {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10vh;
        font-size: 20px;
        font-weight: bold;
        color: #2e8ae7;
        text-align: center;
      }
    }

    .input {
      display: flex;
      flex-direction: column;
      //   justify-content: center;
      align-items: center;
      width: 100%;
      height: 80%;

      .act {
        margin-top: 20px;
      }

      .pwd {
        margin-top: 20px;
      }

      .subBtn {
        margin-top: 20px;
        // width: 100px;
      }

      .reg {
        margin-top: 10px;
      }
    }
  }
}
</style>